<template>
  <div class="good-detail">

    <div class="ui-icon-return">
      <i class="icon-return"></i>
    </div>
    <div class="bd-bottom">
      <ul class="ui-tab">
        <li class="tab-item">商品</li>
        <li class="tab-item">详情</li>
        <li class="tab-item">评价</li>
      </ul>
    </div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="http://images.laiyifen.com/trailbreaker/product/20160812/8405845b-5b96-47ef-adf5-43ea6b8b5c85_l.jpg?v=1.0"/></div>
            <div class="swiper-slide"><img src="http://images.laiyifen.com/trailbreaker/product/20160812/c9690648-51a5-484b-a00c-a686875275b8_l.jpg?v=1.0"/></div>
            <div class="swiper-slide"><img src="http://cdn.oudianyun.com/1498527747409_16.759648105894488_166dc4c8-d1d0-4df7-b393-a8a8db7b1b67.jpg@base@tag=imgScale&h=800&w=800&q=90"/></div>
            <div class="swiper-slide"><img src="http://cdn.oudianyun.com/1498527747369_33.81102360125479_32334f31-7d98-4e6a-87fa-98b51eba0179.jpg@base@tag=imgScale&h=800&w=800&q=90"/></div>
             
        </div>
       <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    
    <div class="pro-info">
        <div class="name ui-nowrap-multi">
            <span>来一份1号金芒芒果肉165g</span>
        </div>
        <div class="lights">十多道工序，锁住芒果香味，橙黄润泽，细腻柔软，酸甜可口，大块厚切果肉才过瘾</div>
        <div class="price marT10">
            <span>￥19.90</span>
        </div>
        <ul class="ui-row-flex">
            <li class="ui-col">
                <a>已售:23884</a>
            </li>
            <li class="ui-col text-center">
                <a>库存:1666</a>
            </li>
        </ul>
    </div>
  </div>
</template>
<script>
 
export default {
  mounted() {
    var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical',
    autoplay: 2000,
    speed:1000,
    // loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
  })     
    // new Swiper(".ui-tab.swiper-container",{
    //   observer: true,
    //   slidesPerView: auto
    // })
  }
}
</script>
<style lang="less" scoped>
.icon-return{
  display: inline-block;
  vertical-align: middle;
  width: .32rem;
  height: .32rem;
  background: no-repeat center center;
  background-image: url(../../../static/imgs/icon-return.png);
  background-size: 80% auto;
}
.ui-icon-return{
  position: fixed;
  left: .05rem;
  top: 0;
  height: .44rem;
  line-height: .44rem;
}
.good-detail{
  .ui-tab{
    height: .44rem;
    text-align: center;
    .tab-item{
      display: inline-block;
      border-bottom: 2px solid transparent;
      color: #777;
      font-weight: 700;
      font-size: .16rem;
      box-sizing: border-box;
      height: .44rem;
      line-height: .44rem;
      text-align: center;
      margin: 0 .2rem;
    }
    .tab-item.active{
      color: #ff6900;
      border-color: #ff6900;
    }
  }
}

.swiper-slide img{
  width:3.75rem;
  height:3.75rem;
}

.pro-info {
    padding: 12px;
    background-color: #fff;
    padding-left: .15rem;
}
.pro-info .ui-nowrap-multi{
   
}
.pro-info .ui-nowrap-multi span{
    // color:red;
    font-size:.17rem;
}
.pro-info .lights {
    padding-top:.06rem;
    color:red;
}
.pro-info .price {
    color: #ff6900;
    font-size:.2rem;
    padding-top:.06rem;
}
.pro-info .ui-row-flex{
    float:left;
    padding-top:.06rem;
}
.pro-info .ui-row-flex .ui-col{
    float:left;
    padding-right:.1rem;
}
</style>

<template>
　　<div>
　　　　<ul>
　　　　　　<li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class="{'active':item.active,'unactive':!item.active}" >
　　　　　　{{item.select}} 
　　　　　　<span class="icon" v-show="item.active">当我是图标</span>
　　　　　　</li>
　　　　</ul>
　　</div>
</template>
 
<script>
 
　　import Vue from 'vue'
 
　　export default{
　　　　data(){
　　　　　　return {
　　　　　　　　active: false,
　　　　　　　　items: [
　　　　　　　　　　{select:'第一行'},
　　　　　　　　　　{select:'第二行'},
　　　　　　　　　　{select:'第三行'},
　　　　　　　　　　{select:'第四行'}
　　　　　　　　]
　　　　　　}
　　　　},
 
 
　　methods: {
　　　　selectStyle (item, index) {
　　　　　　this.$nextTick(function () {
　　　　　　　　this.items.forEach(function (item) {
　　　　　　　　　　Vue.set(item,'active',false);
　　　　　　　　});
　　　　　　　　Vue.set(item,'active',true);
　　　　　　});
　　　　}
　　}
 }
</script>
 
<!-- 样式 -->
<style>
　　.active{
　　　　color:red;
　　}
　　.unactive{
　　　　color:#000;
　　}
　　.icon{
　　　　float: right;
　　　　font-size:12px;
　　}
 
 
</style>

















